<section>
    <hgroup class="hd">
        <img class="avatar" src="{{ site_url }}{{ profile_image }}"/>
        <h3>{{ blog_author }}</h3>
        <div><small>{{ blog_description_en }}</small></div>
        <div class="blog-state">
            <div class="state-item">
                <small>{{ blog_count }}</small>
                <small>日志</small>
            </div>
            <div class="state-item">
                <small>{{ tag_count }}</small>
                <small>标签</small>
            </div>
        </div>
        <ul class="sns-ul">
            {% for sns in blog_sns %}
            <li class="sns-li">
                <a href="{{ sns.url }}" target="_blank">
                    <i class="fa fa-{{ sns.ico }} "></i>
                </a>
            </li>
            {% endfor %}
        </ul>
    </hgroup>

    <!-- Search -->
    <div id="blog-search">
        <input type="text" id="search-input" name="search" placeholder="JavaScript">
        <button id="search-btn" class="contrast"
                data-target="modal-example"
                onClick="toggleModal(event)">Search
        </button>

    </div>


    <!-- Modal -->
    <dialog id="modal-example">
        <article>
            <a href="#close"
               aria-label="Close"
               class="close"
               data-target="modal-example"
               onClick="toggleModal(event)">
            </a>
            <h3>搜索结果</h3>
            <div id="modal" style="display: none;">
                <ul id="result-list"></ul>
            </div>
        </article>
    </dialog>
    <script src="{{ site_url }}assets/js/url.js"></script>
    <script src="{{ site_url }}assets/js/main.js"></script>
    <script src="{{ site_url }}assets/js/modal.js"></script>

</section>


<nav>
    <ul id="blog-nav">
        {% for nav in nav %}
        <li>
            <a href="{{ site_url }}{{ nav.url }}">
                <i class="fa fa-{{ nav.ico }}"></i>
                {{ nav.text }}
            </a>
        </li>
        {% endfor %}
    </ul>
</nav>

